<!--
 * @Author       : xh
 * @Date         : 2022-08-08 13:50:04
 * @LastEditors  : xh
 * @FileName     :
-->
<template>
  <div class="login_warp">
    <img :src="bg" alt="" class="leftbg" />
    <!-- <div class="login-info">
      <img src="../../assets/login-logo.png" class="login-logo" />
      <span class="login-name">XXX管理平台</span>
    </div> -->
    <div class="login_main">
      <el-tabs v-model="activeName" class="login-tabs" @tab-click="handleClick">
        <el-tab-pane label="工号登录" name="first">
          <LoginForm ref="loginRef"></LoginForm>
        </el-tab-pane>
        <el-tab-pane label="手机验证登录" name="second">
          <phoneLogin ref="phoneRef"></phoneLogin>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="login">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import LoginForm from './components/LoginForm.vue'
import phoneLogin from './components/phoneLogin.vue'
import bg from '@/assets/leftbg.jpg'
const router = useRouter()
const formData = reactive({
  username: 'admin'
})
const activeName = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>

<style scoped lang="scss">
.login_warp {
  background-image: linear-gradient(129deg, #0d0d17, #1b1349);
  height: 100%;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  .leftbg {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100vh;
  }
  .login-info {
    position: absolute;
    left: 358px;
    top: 60px;
    display: flex;
    align-items: center;
    z-index: 9;
    .login-logo {
      width: 118px;
      height: 37px;
    }
    .login-name {
      font-size: 22px;
      color: #333;
      &::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 20px;
        border: 1px solid #eee;
        margin: 16px;
      }
    }
  }
  .login_main {
    width: 1280px;
    height: 100%;
    min-height: 700px;
    // background: url('@/assets/login.png') no-repeat top center;
    background-size: 1920px;
    left: 50%;
    margin-left: -640px;
    position: relative;
    .login-tabs {
      background: #fff;
      border-radius: 10px;
      width: 350px;
      height: 31%;
      padding: 53px 24px 61px;
      box-shadow: 0px 3px 13px 0px rgba(153, 153, 153, 0.35);
      position: absolute;
      top: 260px;
      left: 40%;
      margin-left: 260px;
    }
    :deep(, .el-tabs__nav-scroll) {
      display: flex;
      justify-content: center;
    }
    :deep(, .el-tabs__nav-wrap::after) {
      background: none;
    }
    :deep(, .el-tabs__content) {
      margin-top: 20px;
    }
  }
}
</style>
